// (function(){
//     var chartDom = document.querySelector(".main .chart");
//     var myChart = echarts.init(chartDom);
//     var option;
//     option = {
//         xAxis: {
//           type: 'category',
//           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
//         },
//         yAxis: {
//           type: 'value'
//         },
//         series: [
//           {
//             data: [120, 200, 150, 80, 70, 110, 130],
//             type: 'bar'
//           }
//         ]
//       };
//       myChart.setOption(option);
// })()

(function() {
  var yearData = [
    {
      year: "2020", // 年份
      data: [
        // 三个数组是因为有两条线
        [19.5,18.8,17.7,18.3,18 ,18.5,18.3,18.9,18.8,19.5],
        [19.5,18.8,17.9,18.4,17.8,18.3,18.2,18.8,18.6,18.9],
        [20.1,19.3,18.4,18.8,18.4,18.7,18.7,19.1,19.1,19.3]
      ]
    },
    {
      year: "2021", // 年份
      data: [
        // 两个数组是因为有两条线
        [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
        [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
      ]
    }
  ];
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".main .chart"));
  // 2.指定配置
  var option = {
    // 通过这个color修改两条线的颜色
    color: ["#00f2f1", "#ed3f35","#ede640"],
    tooltip: {
      trigger: "axis"
    },
    legend: {
      // 如果series 对象有name 值，则 legend可以不用写data
      // 修改图例组件 文字颜色
      textStyle: {
        color: "#4c9bfd"
      },
      // 这个10% 必须加引号
      right: "10%"
    },
    grid: {
      //控制图表大小
      top: "8%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true, // 显示边框
      borderColor: "#012f4a", // 边框颜色
      containLabel: true // 包含刻度文字在内
    },
    toolbox:{
      feature:{
        saveAsImage:{}
      }
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
          "11:42",
          "12:02",
          "13:49",
          "14:13",
          "15:04", 
          "16:18",
          "17:04", 
          "18:04",
          "19:02",
          "20:06" 
      ],
      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      }
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a" // 分割线颜色
        }
      },
      min: 15,
    max: 23,
    interval: 0.5,
    },
    series: [
      {
        name: "温度1",
        type: "line",
        // true 可以让我们的折线显示带有弧度
        smooth: true,
        data: yearData[0].data[0]
      },
      {
        name: "温度2",
        type: "line",
        smooth: true,
        data: yearData[0].data[1]
      },
      {
          name: "温度3",
          type: "line",
          smooth: true,
          data: yearData[0].data[2]
        }
    ]
  };

  // 3. 把配置给实例对象
  myChart.setOption(option);
  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function() {
    myChart.resize();
  });

  // 5.点击切换效果
  $(".line h2").on("click", "a", function() {
    // alert(1);
    // console.log($(this).index());
    // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
    // console.log(yearData[$(this).index()]);
    var obj = yearData[$(this).index()];
    option.series[0].data = obj.data[0];
    option.series[1].data = obj.data[1];
    // 需要重新渲染
    myChart.setOption(option);
  });
})();
function fetchhumidityitem(){
	$.post('http://127.0.0.1:8080/res',{index:"0", num:"10"}, function(result){
		let temp1 = [];
		let temp2 = [];
		let temp3 = [];
		let timer = [];
		 for(let item of result){
			timer.push(Object.keys(item)[0].slice(10,16));
		 	item = Object.values(item)[0];
			temp1.push(item['humidity1']);
			temp2.push(item['humidity2']);
			temp3.push(item['humidity3']);
		 }
		 var yearData = [
		   {
		     year: "2020", // 年份
		     data: [temp1,temp2,temp3]
		   },
		   
		 ];
		 // 1. 实例化对象
		 var myChart = echarts.init(document.querySelector(".pie .chart"));
		 // 2.指定配置
		 var option = {
		   // 通过这个color修改两条线的颜色
		   color: ["#00f2f1", "#ed3f35","#ede640"],
		   tooltip: {
		     trigger: "axis"
		   },
		   legend: {
		     // 如果series对象有name 值，则legend可以不用写data
		     // 修改图例组件 文字颜色
		     textStyle: {
		       color: "#4c9bfd"
		     },
		     // 这个10% 必须加引号
		     right: "10%"
		   },
		   grid: {
		     //控制图表大小
		     top: "8%",
		     left: "3%",
		     right: "4%",
		     bottom: "3%",
		     show: true, // 显示边框
		     borderColor: "#012f4a", // 边框颜色
		     containLabel: true // 包含刻度文字在内
		   },
		   toolbox:{
		     feature:{
		       saveAsImage:{}
		     }
		   },
		 
		   xAxis: {
		     type: "category",
		     boundaryGap: false,
		     data: timer,
		     axisTick: {
		       show: false // 去除刻度线
		     },
		     axisLabel: {
		       color: "#4c9bfd" // 文本颜色
		     },
		     axisLine: {
		       show: false // 去除轴线
		     }
		   },
		   yAxis: {
		     type: "value",
		     axisTick: {
		       show: false // 去除刻度线
		     },
		     axisLabel: {
		       color: "#4c9bfd" // 文本颜色
		     },
		     axisLine: {
		       show: false // 去除轴线
		     },
		     splitLine: {
		       lineStyle: {
		         color: "#012f4a" // 分割线颜色
		       }
		     },
		     min: 50,
		   max: 100,
		   interval: 5,
		   },
		   series: [
		     {
		       name: "湿度1",
		       type: "line",
		       // true 可以让我们的折线显示带有弧度
		       smooth: true,
		       data: yearData[0].data[0]
		     },
		     {
		       name: "湿度2",
		       type: "line",
		       smooth: true,
		       data: yearData[0].data[1]
		     },
		     {
		         name: "湿度3",
		         type: "line",
		         smooth: true,
		         data: yearData[0].data[2]
		       }
		   ]
		 };
		 
		 // 3. 把配置给实例对象
		 myChart.setOption(option);
		 // 4. 让图表跟随屏幕自动的去适应
		 window.addEventListener("resize", function() {
		   myChart.resize();
		 });
		 
	})
}

$(document).ready(
  function(){

//折线图-湿度变化
(function() {
	fetchhumidityitem()
 setInterval(fetchhumidityitem,1000)

  // 5.点击切换效果
  $(".line h2").on("click", "a", function() {
    // alert(1);
    // console.log($(this).index());
    // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
    // console.log(yearData[$(this).index()]);
    var obj = yearData[$(this).index()];
    option.series[0].data = obj.data[0];
    option.series[1].data = obj.data[1];
    // 需要重新渲染
    myChart.setOption(option);
  });
})();

})

